<template>
    <el-table
    	:data="dataSource"
    	:stripe="stripe"
    	:border="border"
      :fit="fit"
      :show-header="showHeader"
      :highlight-current-row="highlightCurrentRow"
      :empty-text="emptyText"
      :tooltip-effect="tooltipEffect"
      @selection-change="handleSelectionChange">
        <!--选择-->
        <el-table-column
                v-if="hasSelection"
                type="selection"
                width="28">
        </el-table-column>
        <el-table-column
                v-if="hasSelection"
                label="全选"
                width="48"
                align="left">
        </el-table-column>
        <!--序号-->
        <el-table-column
                v-if="hasIndex"
                label="序号"
                type="index"
                width="55">
        </el-table-column>
        <!--数据源-->
        <template  v-for="(column, index) in columns">
        	<el-table-column
              v-if="column.isShow"
              :show-overflow-tooltip="column.showOverflowTooltip || false"
              :width="column.columnWidth"
              :min-width="column.columnMinWidth"
              :align="column.columnAlign || 'left'"
              :header-align="column.columnHeaderAlign"
              :resizable="column.columnResizable || true"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label">
	          <template slot-scope="scope">
		          <!--跳转-->
		          <span v-if="column.goto">
			         	<router-link :to="{path:column.goto,query:column.queryInfo}">
			           	{{qureyFilter(scope.row,column.prop,column.filter,column.filterParams)}}
			         	</router-link>
			        </span>
		          <!--仅仅显示-->
		          <span v-else>{{ qureyFilter(scope.row,column.prop,column.filter,column.filterParams) }}</span>
	          </template>
	        </el-table-column>
	        <!--操作-->
	        <slot  v-if="column.isPro" :name="column.slotName"></slot>
        </template>
    </el-table>
</template>

<script>
    import Vue from 'vue'
    import * as filters from '@/filters';
    Object.keys(filters).forEach(key => {
			  Vue.filter(key, filters[key])
		});
    export default {
        name: 'tm-table',
        props: {
        	// 这是相应的字段展示
            columns: {
                type: Array,
                default: function () {
                    return []
                }
            },
          // 这是数据源
            dataSource: {
                type: Array,
                default: function () {
                    return []
                }
            },
          //是否为斑马纹 table
            stripe: {
							type: Boolean,
							default: false
						},
					//是否带有纵向边框
						border: {
							type: Boolean,
							default: false
						},
					//列的宽度是否自撑开
						fit: {
							type: Boolean,
							default: true
						},
					//是否显示表头
						showHeader: {
							type: Boolean,
							default: true
						},
					//是否要高亮当前行
						highlightCurrentRow: {
							type: Boolean,
							default: false
						},
					//空数据时显示的文本内容
						emptyText: {
							type: String,
							default: '暂无数据'
						},
					//tooltip effect 属性
						tooltipEffect: {
							type: String,
							default: 'dark'
						},
            //是否可以选择
            hasSelection: {
                type: Boolean,
                default: function () {
                    return false
                }
            },
            //是否有序列项
            hasIndex: {
                type: Boolean,
                default: function () {
                    return false
                }
            },
            
        },
        data() {
        	return {
        		Vue
        	}
        },
        methods: {
        	qureyFilter(row, val, qqq, filterParams) {
			      let rtn = row[val];
			      if (typeof qqq === "function") {
			        return qqq(row[val],row , filterParams);
			      } else {
								return Vue.filter(qqq)(rtn, filterParams);
			      }
			    },
        	//将选中的行发送到父组件
        	handleSelectionChange(val) {
            const selectionArr = [];
            val.forEach(function (el) {
                selectionArr.push(el);
            });
            this.$emit('commitSelection', selectionArr);
        	},
        }
    }
</script>

<style scoped="scoped">
	 .el-table {
        width: 100%
    }
</style>